<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Ext test</title>
    <script type="text/javascript" src="ext-base.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
</head>
<body>

</body>
<script type="text/javascript">
    var data = {
            name: "mark one",
            age: 28,
            sex: "male",
            fav: ["game", "swim", "programming"],
            language: [{
                name: "C#",
                level: 2
            }, {
                name: "javascript",
                level: 3
            }, {
                name: "java",
                level: 2
            }, {
                name: "python",
                level: 1
            }],
            like: true
        };
    function test() {
        var str = ['<p>name: {name}</p>',
                '<p>age: {age}</p>',
                '<p>sex: {sex}</p>',
                '<p>fav:</p><ul>',
                '<tpl for="fav">',
                    '<li>{.}</li>',
                '</tpl>',
                '</ul>',
                '<p>language:</p><ul>',
                '<tpl for="language">',
                    '<li>{xindex+1} - ',
                    '<span style="color:{[values.level > 1 ? "red" : "black"]}">',
                    '{name}: {level}</span>',
                    '</li>',
                '</tpl>',
                '</ul>',
                '<tpl if="like"><span style="color: red">Yes, we like it!</span></tpl>',
                '<tpl if="!like"><span style="color: green">No, we don\'t like it!</span></tpl>'].join(''),
            tpl, startTime, endTime, loopTime = 1000, i, compileTime, applyTime;

        // compile time
        startTime = new Date();
        for (i = 0; i < loopTime; i++) {
            tpl = new Ext.XTemplate(str);
        }
        endTime = new Date();
        compileTime = endTime - startTime + "ms";

        // apply time
        startTime = new Date();
        for (i = 0; i < loopTime; i++) {
            tpl.applyTemplate(data);
        }
        endTime = new Date();
        applyTime = endTime - startTime + "ms";
        return {compileTime: compileTime, applyTime: applyTime};
    }
</script>
</html>